
import React,{Component} from 'react';
import {
    Text,
    StyleSheet,
    View,
    ScrollView,
    TouchableOpacity
    ,WebView,FlatList
}from 'react-native';
import Modal from "react-native-modal";

import Style  from '../../../components/Style';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Tool from "../../../components/Tool";
import Indicator from '../../../components/Indicator';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
import DropDown from '../../../components/DropDown';
var Dimensions = require('Dimensions');
import InternetScreen from '../ImportantFollow/components/InternetScreen'
const Color = Style.color;
const Font = Style.fontSize;

export default class Import extends Component{
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
            title:'格局战详情'
        }
    };
    // 构造
    constructor(props) {
        super(props);

        this.param = {indexCode: this.props.navigation.getParam('indexCode')};
        this._changeTitle = this._changeTitle.bind(this);  //如果不绑定的话,就是调用的子组件的this,会找不到方法
        this.state = {
            isVisible: false,
            rightList:[],
            topList:[],
            indicator: {visible: true, message: ''},//控制遮罩层,
            title:this.props.navigation.getParam('indexName'),
            mapDataArray:[],
            indexCode:this.props.navigation.getParam('indexCode'),
            selectPeriodIndex:0,
            selectTitle:'index_1'  //index_1:专线  index_2:成员  index_3:物联网
        };
    }
    componentDidMount() {
        this._getRightList();
        this._getTopList("");
    }
    _getTopList(indexCode){
        if(indexCode != "" && indexCode != null){
            this.param.indexCode = indexCode;
        }
        let qr_params = "",
            _this=this;
        _this.setState({indicator: {visible: true, message: ''}});

        _this._cancelSelected();
        for (key in this.param) {
            qr_params += ("&" + key + "=" + this.param[key]);
        }
        qr_params = qr_params.substring(1);
        Tool.fetchJson(Tool.appPath.mkst + 'pattern/getPatternDetail?indexCode='+this.param.indexCode+'&&orgId=1','',function (data) {
            if(data.state){
                _this.setState({
                    topList:data.info,
                    indicator: {visible: false, message: ''},
                    indexCode:_this.param.indexCode
                });
            }else{
                _this.setState({indicator: {visible: true, message: data.info}});
            }

        },function (error) {
            _this.setState({indicator: {visible: true, message: error}});
        },function () {

        });
    }
    _getRightList(){
        let _this = this;
        Tool.fetchJson(Tool.appPath.mkst + 'pattern/getHomepagePatternInfo','',function (data) {
            _this._getDorpDownList(data.info[0].patterns);
        },function () {

        },function () {

        });
    }
    _getDorpDownList(data){
        let array = [];
        let index= 0;
        for(let i =0;i<data.length;i++){
            if(data[i].indexCode == this.state.indexCode){
                index = i;
            }
            array.push({label:data[i].indexName,value:data[i].indexCode});
        }
        this.setState({
            selectPeriodIndex:index,
            rightList:array,
        });
    }
    _DropDownClick(index,indexCode) {
        this._getTopList(indexCode)
    }
    _cancelSelected() {
        this.setState({
            isVisible: false,
        });
    }
    _changeTitle(title){// 这里的函数是经过constructor中绑定过this的
        let _this = this;
        _this.setState({
            selectTitle:title,
        })
    }
    render(){
        return(
            <View >
                <Indicator isVisible={this.state.indicator.visible} message={this.state.indicator.message}/>
                <View style={{ flex:1}}>
                    <HeadHtml click={this._changeTitle} select={this.state.selectTitle}/>

                    {
                        this.state.selectTitle != "index_3"?
                            <View style={styles.cityView}>
                                <HomeFollowHead
                                    click={this._DropDownClick}
                                    name={this.state.title} list={this.state.rightList} index={this.state.selectPeriodIndex}/>

                                <IndexRandHeader/>
                                {
                                    this.state.indicator.visible || (this.state.topList && this.state.topList.length > 0) ?
                                        <ScrollView style={{flex:1}}>
                                            {this.state.topList && this.state.topList.map((item, index) => (
                                                <TopItem background={((index %2==0)?Color.white:'#f2f2f2')}
                                                         color={Color.pink} data={item} rank={(index+1)} key={`IndexItem_${index}`}/>
                                            ))}
                                        </ScrollView>
                                        :
                                        <Indicator isVisible={true} message={Style.tip.noData} type="none"/>
                                }
                            </View>
                            :
                            <InternetScreen indexCode={this.state.indexCode} indexName={this.state.title}/>
                    }

                </View>
            </View>
        )
    }
}
class HeadHtml extends Component{
    render(){

        return(
            <View style={[styles.headView]}>
                <HeaderItem title={'专线'} code={'index_1'} select={this.props.select=='index_1'?true:false} click={this.props.click}/>
                <HeaderItem title={'成员'} code={'index_2'} select={this.props.select=='index_2'?true:false} click={this.props.click}/>
                <HeaderItem title={'物联网'} code={'index_3'} select={this.props.select=='index_3'?true:false} click={this.props.click}/>
            </View>
        )
    }
}
class HeaderItem extends Component{
    render(){
        let code = this.props.code;
        return(
            <View style={[{flex:1,height:50,justifyContent:'center'},this.props.select == true?styles.select : null]}>
                <TouchableOpacity onPress={()=> this.props.click(code)}>
                    <Text style={{textAlign:'center',color:this.props.select == true?Color.blue:Color.black}}>{this.props.title} </Text>
                </TouchableOpacity>
            </View>
        )
    }
}
class HomeFollowHead extends Component{
    render(){
        return(
            <View style={{height:50,flexDirection:'row', alignItems:'center',paddingLeft:20,paddingRight:20}}>
                    <DropDown color={Style.color.green}
                              data={this.props.list}
                              title={'请选择指标'}
                              defaultIndex={this.props.index}
                              onConfirm={(index) => this.props.click(index,this.props.index)}
                              contentComponent={
                                  <View style={{flexDirection:'row'}}>
                                      <ChoseIcon name={"sort"} size={18} color={Color.black}/>
                                      <Text style={styles.kpiTitle}>{this.props.name}</Text>
                                  </View>
                              }
                    />
            </View>
        )
    }
}


class TopItem extends Component{
    _getNum(){
        if(this.props.data.FIELD_TYPE ==3){
            return this._getRatio(this.props.data.INDEX_VALUE)+"%";
        }else{
            return this._getRatio(this.props.data.INDEX_VALUE)+"%";
            //return this.props.data.INDEX_VALUE;  展示没有指标类型,所以就都按照百分数来
        }
    }
    _getRatio(value){
        var str=Number(value*100).toFixed(1);
        return str;

    }
    render(){
        const bColor= this.props.background;
        const color  =this.props.color;
        const fontColor = ['pink', Color.yellow, Color.green]
        return(
                <View style={[styles.IndexRandItemView,{backgroundColor:bColor}]}>
                    <View style={{width:'20%',paddingLeft:10}}>
                        <Text style={[styles.IndexRandItemTD,{color:Color.gray, fontWeight:'bold'}]}>{this.props.rank}</Text>
                    </View>
                    <View style={{width:'20%'}}><Text style={styles.IndexRandItemTD}>{this.props.data.ORG_NAME}</Text></View>
                    <View style={{width:'20%'}}><Text style={styles.IndexRandItemTD}>123</Text></View>
                    <View style={{width:'20%'}}><Text style={styles.IndexRandItemTD}>456</Text></View>
                    <View style={[styles.IndexRandItemRight,{width:'20%'}]}>
                        <Text style={[styles.IndexRandItemTD,{color:Color.lightRed}]}>{this._getNum()}</Text>
                    </View>
                </View>
        );

    }

}

class IndexRandHeader extends Component {
    render() {
        return (
            <View style={styles.IndexRandHeaderView}>
                <View style={{width:'20%'}}>
                    <Text style={styles.IndexRandHeaderTH}>排名</Text>
                </View>
                <View style={{width:'20%'}}>
                    <Text style={styles.IndexRandHeaderTH}>地市</Text>
                </View>
                <View style={{width:'20%'}}>
                    <Text style={styles.IndexRandHeaderTH}>到达值</Text>
                </View>
                <View style={{width:'20%'}}>
                    <Text style={styles.IndexRandHeaderTH}>目标值</Text>
                </View>
                <View style={{width:'20%'}}>
                    <Text style={styles.IndexRandHeaderTH}>完成率</Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    kpiTitle: {
        fontSize: Style.fontSize.normal,marginLeft: 10,marginRight: 10
    },
    imIcon:{
        flexDirection:"row", alignItems:'center',flex:1,
    },
    selectRight:{
        backgroundColor:Color.lightGray,
    },

    select:{
        borderColor:Color.blue,
        borderBottomWidth:2,
    },
    IndexRandHeaderView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 10,
        paddingHorizontal: 10,
        backgroundColor:Color.heightGray
    },
    IndexRandHeaderTH: {
        fontSize: Font.normal, color: Color.gray
    },
    IndexRandItemView: {
        borderBottomWidth: 1,
        borderColor:Color.lightGray,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 10
    },
    IndexRandItemTD: {
        fontSize:Font.normal,
        color: Color.black
    },

    headView:{
        flexDirection:'row',
        backgroundColor:Color.white,
        justifyContent:'center',
        alignItems:'center',
        shadowColor:'#c0c0c0',
        shadowOffset:{ width:2, height:2 },
        shadowOpacity:0.2,
        shadowRadius:1,
        elevation: 4,
        height:50,
        borderBottomWidth:1,
        borderColor:'#c0c0c0',
        borderStyle:'dotted',
    },
    cityView:{
        backgroundColor:Color.white,
        shadowColor:'#c0c0c0',
        shadowOffset:{ width:4, height:2 },
        shadowOpacity:0.2,
        shadowRadius:2,
        elevation: 4,
        borderTopWidth:1,
        borderColor:'#c0c0c0',
        borderStyle:'dotted',
        height:Dimensions.get('window').height-70,
    },
    topItem:{
        height:80,
        justifyContent:'center',
        padding:20,
    },
    topItemBackColor:{
        backgroundColor:'#fcfcfc',
    }
});
